<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三栏布局</title>
    <style>
        * {
            /* box-sizing用来控制元素的 盒模型 计算方式，决定元素的 width 和
             height 是否包括边框 (border) 和内边距 (padding) */
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%; /* 确保html和body的高度为100% */
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            line-height: 1.6;
            display: flex;
            flex-direction: column; /* 使用flexbox布局 */
        }

        header {
            background-color: #0077cc;
            color: white;
            text-align: center;
            padding: 20px;
        }

        /* 主体内容 */
        .container {
            display: flex; /* 使用flex布局 */
            flex: 1; /* 使容器占据剩余的空间 */
            margin: 10px; /* 设置外边距 */
            gap: 10px; /* 列间距 */
        }

        nav {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 200px; /* 固定宽度 */
        }

        section {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            flex: 1; /* 使主要内容区域占据剩余空间 */
        }

        aside {
            background-color: #f8f9fa;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 200px; /* 固定宽度 */
        }

        /* 优化 ul 和 li 样式 */
        nav ul {
            list-style: none; /* 移除默认的圆点 */
            padding: 0;
            margin: 0;
        }

        nav ul li {
            margin: 15px 0; /* 每个列表项的垂直间距 */
            border-bottom: 1px solid #ddd; /* 添加下边框 */
            padding-bottom: 10px;
        }

        nav ul li:last-child {
            border-bottom: none; /* 最后一项不需要下边框 */
        }

        nav ul li a {
            text-decoration: none; /* 移除默认下划线 */
            color: #0077cc;
            font-weight: bold;
            font-size: 16px;
            padding: 10px;
            display: block;
            transition: background-color 0.3s, color 0.3s;
        }

        nav ul li a:hover {
            background-color: #0077cc;
            color: white;
            border-radius: 4px; /* 悬停时添加圆角和背景色变化 */
        }

        footer {
            text-align: center;
            background-color: #0077cc;
            color: white;
            padding: 15px;
        }

        /* 媒体查询 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column; /* 在小屏幕上变为单列 */
            }

            nav, aside {
                display: none; /* 隐藏导航栏和侧边栏 */
            }

            section {
                width: 100%; /* 主要内容区域占据100%宽度 */
            }
        }

        @media (min-width: 769px) {
            .container {
                flex-direction: row; /* 大于768px时为横向布局 */
            }
        }
    </style>
</head>
<body>

<header>
    <h1>我的网站</h1>
    <p>欢迎来到我的个人网站</p>
</header>

<div class="container">
    <nav>
        <h2>导航栏</h2>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>

    <section>
        <h2>主要内容</h2>
        <p>这是网站的主要内容区域，你可以在这里展示你的产品、服务或者文章。</p>
    </section>

    <aside>
        <h2>侧边栏</h2>
        <p>这里是一些附加信息，比如推荐文章或广告。</p>
    </aside>
</div>

<footer>
    <p>&copy; 2024 我的公司. 版权所有.</p>
</footer>

</body>
</html>
